<template>
  <div class="app-config-layout">
    <div class="app-config__title" v-if="slots.title">
      <div class="app-list__title">
        <slot name="title"></slot>
      </div>
    </div>
    <div class="app-config__subtitle" v-if="slots.subtitle">
      <div class="app-list__subtitle">
        <slot name="subtitle"></slot>
      </div>
    </div>
    <div class="app-config__body" v-if="slots.body">
      <div class="app-list__body">
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>
  <script setup>
const slots = defineSlots()
</script>
  <style lang="scss" scoped>
.app-config-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  // margin: 32px 0 0 0;
  overflow: hidden;
}

.app-list__title {
  height: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #252a30;
}

.app-list__subtitle {
  height: 20px;
  margin: 16px 16px 0 0;
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #252a30;
}

.app-list__body {
  margin: 16px 16px 0 0;
}
</style>
  